<template>
  <el-dialog title="添加员工" v-model="addEmployeeDialogVisible" width="60%" :close-on-click-modal="false"
    :show-close="false" :close-on-press-escape="false" @close="resetForm">
    <el-form :model="employeeForm" ref="employeeFormRef" label-width="100px"
      :style="{ 'max-height': '50vh', 'overflow-y': 'auto' }">
      <!-- 姓名 -->
      <el-form-item label="姓名" :rules="[{ required: true, message: '请输入姓名', trigger: 'blur' }]">
        <el-input v-model="employeeForm.name" placeholder="请输入员工姓名"></el-input>
      </el-form-item>

      <!-- 性别 -->
      <el-form-item label="性别" :rules="[{ required: true, message: '请选择性别', trigger: 'blur' }]">
        <el-select v-model="employeeForm.gender" placeholder="请选择性别">
          <el-option label="男" value="男"></el-option>
          <el-option label="女" value="女"></el-option>
        </el-select>
      </el-form-item>

      <!-- 出生日期 -->
      <el-form-item label="出生日期" :rules="[{ required: true, message: '请选择出生日期', trigger: 'blur' }]">
        <el-date-picker v-model="employeeForm.date_of_birth" placeholder="请选择出生日期" type="date"></el-date-picker>
      </el-form-item>

      <!-- 邮箱 -->
      <el-form-item label="邮箱"
        :rules="[{ required: true, message: '请输入邮箱', trigger: 'blur' }, { type: 'email', message: '请输入有效的邮箱', trigger: ['blur', 'change'] }]">
        <el-input v-model="employeeForm.email" placeholder="请输入邮箱"></el-input>
      </el-form-item>

      <!-- 电话号码 -->
      <el-form-item label="电话号码" :rules="[{ required: true, message: '请输入电话号码', trigger: 'blur' }]">
        <el-input v-model="employeeForm.phone_number" placeholder="请输入电话号码"></el-input>
      </el-form-item>

      <!-- 入职日期 -->
      <el-form-item label="入职日期" :rules="[{ required: true, message: '请选择入职日期', trigger: 'blur' }]">
        <el-date-picker v-model="employeeForm.hire_date" placeholder="请选择入职日期" type="date"></el-date-picker>
      </el-form-item>

      <!-- 职位 -->
      <el-form-item label="职位" :rules="[{ required: true, message: '请输入职位', trigger: 'blur' }]">
        <el-input v-model="employeeForm.position" placeholder="请输入职位"></el-input>
      </el-form-item>

      <!-- 部门 -->
      <el-form-item label="部门" :rules="[{ required: true, message: '请输入部门', trigger: 'blur' }]">
        <el-input v-model="employeeForm.department" placeholder="请输入部门"></el-input>
      </el-form-item>

      <!-- 工资 -->
      <el-form-item label="工资" :rules="[{ required: true, message: '请输入工资', trigger: 'blur' }]">
        <el-input v-model="employeeForm.salary" placeholder="请输入工资"></el-input>
      </el-form-item>

      <!-- 地址 -->
      <el-form-item label="地址" :rules="[{ required: true, message: '请输入地址', trigger: 'blur' }]">
        <el-input v-model="employeeForm.address" placeholder="请输入地址"></el-input>
      </el-form-item>

      <!-- 状态 -->
      <el-form-item label="状态" :rules="[{ required: true, message: '请输入状态', trigger: 'blur' }]">
        <el-select v-model="employeeForm.status" placeholder="请选择状态">
          <el-option label="在岗" value="在岗"></el-option>
          <el-option label="离职" value="离职"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <!-- 底部按钮 -->
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancleDialog">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { ref, onMounted, watch } from "vue"
import { createData } from "../../../api/api"

const props = defineProps({
  addEmployeeDialogVisible: {
    type: Boolean,
    default: false
  }
})

const addEmployeeDialogVisible = ref(props.addEmployeeDialogVisible)

watch(() => props.addEmployeeDialogVisible, (newVal) => {
  addEmployeeDialogVisible.value = newVal
})

const emit = defineEmits<{ (event: string): void }>()
const cancleDialog = () => {
  emit("closeDialog")
}
// 员工表单数据
const employeeForm = ref({
  "name": "",
  "gender": "",
  "date_of_birth": "",
  "email": "",
  "phone_number": "",
  "hire_date": "",
  "position": "",
  "department": "",
  "salary": "",
  "address": "",
  "status": ""
});


// 重置表单
const resetForm = () => {
  emit("closeDialog")
  employeeForm.value = {
    "name": "",
    "gender": "",
    "date_of_birth": "",
    "email": "",
    "phone_number": "",
    "hire_date": "",
    "position": "",
    "department": "",
    "salary": "",
    "address": "",
    "status": ""
  };
};

// 提交表单
const submitForm = async () => {
  //格式化时间
  employeeForm.value.date_of_birth = formatDateToYYYYMMDD(employeeForm.value.date_of_birth)
  employeeForm.value.hire_date = formatDateToYYYYMMDD(employeeForm.value.hire_date)
  const res = await createData("/employees", employeeForm.value)
  emit("closeDialog")
  emit("refreshPage")
  console.log("res", res);

};
function formatDateToYYYYMMDD(date: string) {
  if (!date) return null; // 如果没有传入日期，返回null

  const d = new Date(date); // 创建日期对象
  const year = d.getFullYear(); // 获取年份
  const month = String(d.getMonth() + 1).padStart(2, '0'); // 获取月份，并确保是两位数
  const day = String(d.getDate()).padStart(2, '0'); // 获取日期，并确保是两位数

  return `${year}-${month}-${day}`; // 返回格式化后的日期字符串
}
</script>
<style scoped lang="scss"></style>